<script setup lang="ts">
import SList from '@/components/common/list/SList.vue'
import type { MenuVo, RouteMenu } from '@/type/Menu'
import { useList } from '@/composables/list-composable'
import type { ResultData } from '@/api/service'
import type { Page } from '@/type/User'
import { menuListApi } from '@/api/menu'
import { useRouter } from 'vue-router'

const router = useRouter()
const viewId = 'MenuList'
const { tableData, pageQuery, statement, total, tableLoading, search } = useList<RouteMenu>(
  viewId,
  getData,
  () => {}
)

function getData() {
  tableLoading.value = true
  menuListApi(pageQuery).then((response: ResultData<Page<RouteMenu[]>>) => {
    tableData.value = response.data.modelList
    tableLoading.value = false
  })
}

const methods = {
  add: () => {
    router.push({ path: '/menu/info' })
  },
  edit: (row: MenuVo) => {
    router.push({ path: '/menu/info', query: { menuId: row.menuId } })
  }
}
</script>

<template>
  <s-list
    :statement="statement"
    :page-size="pageQuery.pageSize"
    :table-loading="tableLoading"
    :data="tableData"
    :total="total"
    @search="search"
    :methods="methods"
    :row-key="'menuId'"
  />
</template>

<style scoped></style>
